<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button
          style="float: right"
          size="mini"
          type="primary"
          @click="() => handleSave()"
          >保存</el-button
        >
      </div>
      <div class="text item">
        <vxe-table
          border
          align="center"
          show-footer
          :data="item.settings"
          auto-resize
          :export-config="{}"
          resizable
          ref="xTable"
          :show-overflow="false"
          size="small"
          :mouse-config="{ selected: true }"
          :checkbox-config="{ range: true }"
          :keyboard-config="{
            isArrow: true,
            isDel: false,
            isEnter: true,
            isTab: true,
            isEdit: true,
          }"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
          }"
        >
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column
            field="name"
            title="名称"
            align="left"
            header-align="center"
            width="120"
          >
            <template #default="{ row }">
              <div>
                {{ row.name }}
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="customAccountId"
            title="科目"
            align="left"
            header-align="center"
            :edit-render="{
              attrs: {},
              autofocus: '.custom-input',
            }"
          >
            <template #default="{ row }">
              <div>
                {{ row.customAccountName }}
              </div>
            </template>
            <template #edit="{ row }">
              <account-select
                v-model="row.customAccountId"
                optionClass="vxe-table–ignore-clear"
                @change="(node) => handleAccountChange(row, node)"
              ></account-select>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getItem, updateItem } from "@/api/endperiodprocess";
import accountSelect from "@/components/Select/accountSelect.vue";
export default {
  components: {
    accountSelect,
  },
  data() {
    return {
      item: { id: "", name: "", settings: [] },
      title: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getItem(this.id).then((res) => {
        this.item = res || {};
        this.title = this.item.name;
      });
    },
    handleSave() {
      this.saveData();
    },
    saveData() {
      updateItem(this.item).then((res) => {
        if (!res) return;
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
          position: "bottom-right",
        });
        //this.$emit("refresh", res);
      });
    },
    handleAccountChange(row, node) {
      let account = node.node;
      row.customAccountName = account.fullName;
      row.customAccountId = account.id;
    },
  },
  mounted() {
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>
